<script setup>
import {ref,onMounted} from 'vue'
import axios from 'axios'

// const channelList = ref([
//     {id:1,name:'推荐',path:'/index/recommend'},
//     {id:2,name:'穿搭',path:'/index/dressing'},
//     {id:3,name:'美食',path:'/index/delicacy'},
//     {id:4,name:'彩妆',path:'/index/cosmetics'},
// ])
const channelList = ref();
const channel = ref(0);

onMounted(async()=>{
    let res =await axios.get('http://127.0.0.1:7003/api/channelList');
    channelList.value = res.data;
})
</script>
<template>
     <div class="main-container">
        <div class="channel-container">
            <ul>
                <li v-for="(v,i) in channelList" :key="v.id"
                :class="channel==i?'selected':''" @click="channel=i">
                <router-link :to="{path:v.url,query:{type:v.type}}"> {{v.title}}</router-link>
                </li>
            </ul>
        </div>
        <!-- 就是显示当前路由级别下一级的页面 -->
        <router-view />
    </div>
</template>
<style scoped>

</style>